import React, { Component } from 'react'
import Home from './Home'
import eventBus from './utils/event-bus'

export class App extends Component {

  componentDidMount() {
    eventBus.on('banner-change', this.handleBannerChange, this)
  }
  handleBannerChange(direction, name, age) {
    console.log('监听到banner-change', direction, name, age)
    this.setState({
      user: { name, age }
    })
  }
  componentWillUnmount() {
    eventBus.off('banner-change', this.handleBannerChange)
  }
  constructor() {
    super()
    this.state = {
      user: {
        name: '',
        age: 0
      }
    }
  }
  render() {
    const { user } = this.state
    return (
      <div>
        <h1>App</h1>
        <p>{ user.name } - { user.age }</p>
        <Home />
      </div>
    )
  }
}

export default App